import React from 'react';
import { Row, Col, Form, InputNumber, Input, Button, Table, Select, Modal, message} from 'antd';
const R = require('ramda');
import BizParams from '../../../components/commons/BizParams'
import AreaSelect from '../../../components/commons/AreaSelect'


const FormItem = Form.Item;
export default Form.create({wrappedComponentRef: true})(class AddAddress extends React.Component {
	constructor(props) {
		super(props);
        this.state = {
            open: false,
        }
	}

    handleCancel = () => {
        this.props.form.setFieldsValue({name: "", telephone: "", mobile: "", area: "", address: ""});
        this.setState({open:false})
    }

    handleOpen = () => {
        this.setState({open: true})
    }

    handleConfirm = () => {
        this.props.form.validateFields((errors, values) => {
            if (errors) return
            let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource
            let address = R.omit(["area"])(values);
            address.province = values.area[0];
            address.city = values.area[1];
            address.district = values.area[2]; 
            address.cstid = this.props.cstId;
            this.props.dispatch({
                type: 'orderManage/createAddress',
                payload: {
                    address: address
                }
            })
            this.handleCancel();
        })
    }

	render() {
		const { getFieldDecorator } = this.props.form;
        const formItemLayout = {labelCol: { xs: {span: 8}, sm: {span: 8}}, wrapperCol: {xs: {span: 15}, sm: {span: 14}}};

        return (
            <Modal visible={this.state.open} title={"添加货物存放地址"} width={800} wrapClassName="vertical-center-modal" 
                onCancel={this.handleCancel} onOk={this.handleConfirm}>
                <Form>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="联系人" hasFeedback>
                                {getFieldDecorator('name', {
                                    rules: [{
                                        required: true, message: '请输入联系人'
                                    }],
                                })(
                                    <Input maxLength="30"/>
                                )}
                            </FormItem></Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="电话" hasFeedback>
                                {getFieldDecorator('telephone', {
                                    rules: [{
                                        required: true, message: '请输入电话'
                                    }],
                                })(
                                    <Input maxLength="30"/>
                                )}
                            </FormItem></Col>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="手机" hasFeedback>
                                    {getFieldDecorator('mobile')(
                                        <Input maxLength="30"/>
                                    )}
                                </FormItem></Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="区域" hasFeedback>
                                {getFieldDecorator('area', {
                                    rules: [{
                                        required: true, message: '请选择区域'
                                    }],
                                })(
                                    <AreaSelect/>
                                )}
                            </FormItem></Col>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="详细地址" hasFeedback>
                                    {getFieldDecorator('address', {
                                        rules: [{
                                            required: true, message: '请输入详细地址'
                                        }],
                                    })(
                                        <Input maxLength="100"/>
                                    )}
                                </FormItem></Col>
                    </Row>
                </Form>
            </Modal>
        );
	}
})


// WEBPACK FOOTER //
// ./public/src/components/order/components/AddAddress.js